<template>
  <div id="app">
    <nav>
      <ul>
        <router-link to="/xd" tag="li">兄弟 - 子 - 父 - 子</router-link>
        <router-link to="/wg" tag="li">非兄弟，无关系 event bus</router-link>
        <router-link to="/hd" tag="li">后代 provide inject</router-link>
        <router-link to="/kc" tag="li">跨层 $attrs $listeners</router-link>
      </ul>
    </nav>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: true,
    };
  },
  provide() {
    return {
      "flag": this.flag,
    };
  },
};
</script>



<style lang="scss">
li {
  cursor: pointer;
}
.router-link-exact-active {
  color: deepskyblue;
}
</style>
